Aloha！又是我少女人妻 Uerica！這幾天趁著中秋連假想說可以多寫幾篇文章，但明明規劃好都跟想像中不一樣，果然還是太嫩了呢哈哈哈，真心佩服著所有完賽的前輩們～

Component Views and HTML

Search UI 中所有 Component View 都可以自訂自己想要的樣子，寫法遵循 React Render Props 的模式，我們可以到 react-search-ui-views 中查看對應的Component code，來找到命名與函數。

以 PagingInfo 這個 Component 為例子，首先在 react-search-ui-views 的文件中找到 PagingInfo.js

function PagingInfo(_ref) {
  var className = _ref.className,
      end = _ref.end,
      searchTerm = _ref.searchTerm,
      start = _ref.start,
      totalResults = _ref.totalResults,
      rest = _objectWithoutProperties(_ref, ["className", "end", "searchTerm", "start", "totalResults"]);

  return React.createElement("div", _extends({
    className: appendClassName("sui-paging-info", className)
  }, rest), "Showing", " ", React.createElement("strong", null, start, " - ", end), " ", "out of ", React.createElement("strong", null, totalResults), searchTerm && React.createElement(React.Fragment, null, " ", "for: ", React.createElement("em", null, searchTerm)));
}

PagingInfo.propTypes = {
  end: PropTypes.number.isRequired,
  searchTerm: PropTypes.string.isRequired,
  start: PropTypes.number.isRequired,
  totalResults: PropTypes.number.isRequired,
  className: PropTypes.string
};
export default PagingInfo;
};

在文件中可以找到四個 prop :

• end
• searchTerm
• start
• totalResults

從 PagingInfo.js 可判斷原本的 PagingInfo 上顯示的文字是 "Showing start - end out of totalResults for: searchTerm"

假設我們想改成 start - end for: searchTerm (1 - 5 for: test )

<PagingInfo
  view={({ start, end, searchTerm }) => (
    <div className="paging-info">
      <strong>
        {start} - {end} for {searchTerm}
      </strong>
    </div>
  )}
/>

是不是很簡單阿～大家都趕快去試看看吧！

感謝各位閱讀！今天就先講解到這邊拉～希望明天還能靈感滿滿阿哈哈哈哈，明天見摟大家掰掰！